<div fxFlexFill fxLayoutAlign="center center" class="reg_box" [ngClass]="source.className">
  <div id="bg_cover"></div>
  <form class="mat-elevation-z6" #regForm="ngForm" novalidate fxFlex="400px" fxFlex.xs="100%">
    <!-- <div class="brand">
      <img src="http://getbootstrapadmin.com/remark/material/iconbar/assets/images/logo-blue.png" alt="">
      <h2 class="brand-text font-size-18">qbmf</h2>
    </div> -->

    <div class="brand" [ngClass]="source.className">
      <img [src]="source.brand" alt="">
    </div>
    <div style="padding: 20px 40px 0px;">

      <div class="mt30">
        <mat-form-field fxFlexFill>
          <input class="line-height30" color="#fff" type="text" matInput [(ngModel)]="user.nick" pattern="^1[123456789][0-9]{9}$" name="nick"
            required #nick="ngModel" />
          <mat-placeholder>
            <mat-icon mdPrefix fontIcon="fa-user"></mat-icon>{{'手机号'|translate}}
          </mat-placeholder>
          <mat-error>{{'手机号格式错误'|translate}}</mat-error>
          <div class="red-text error" *ngIf="user.nickError">{{'手机号已注册'|translate}}</div>
        </mat-form-field>
      </div>
      <div class="mt30" style="position: relative;">
        <mat-form-field style="margin-right: 110px;">
          <input class="line-height30" color="#fff" type="text" matInput [(ngModel)]="user.code" name="code" required #code="ngModel"
            [placeholder]="'验证码'|translate" />
          <!-- <mat-placeholder> 验证码 </mat-placeholder> -->
          <mat-error>{{'请输入验证码'|translate}}</mat-error>
          <div class="red-text error" *ngIf="user.codeError">{{'验证码错误'|translate}}</div>
        </mat-form-field>
        <button style="position: absolute;right: 0px;top:22px;" mat-raised-button (click)="getCode()" [disabled]="!nick.valid" [innerHTML]="user.codeText |translate"></button>
      </div>
      <div class="mt30">
        <mat-form-field fxFlexFill>
          <input class="line-height30" type="password" matInput [(ngModel)]="user.password" name="password" required #password="ngModel"
          />
          <mat-placeholder>
            <mat-icon mdPrefix fontIcon="fa-unlock-alt"></mat-icon>{{'设置密码'|translate}}
          </mat-placeholder>
        </mat-form-field>
      </div>
      <div class="mt20">
        <button class="submit" fxFlexFill mat-raised-button (click)="submit()" [disabled]="!regForm.valid">
          {{'注册'|translate}}
        </button>
      </div>
      <p class="line-height30 center-align mt20">
        <a class="under_line" routerLink="/login">{{'立即登录'|translate}}</a>
      </p>
      <p class="line-height30 center-align mt10">
        language：
        <translate-menu></translate-menu>
      </p>
    </div>
  </form>
</div>